<script lang="ts" setup>
import { h, reactive, toRefs } from 'vue'
import { CloudDownloadOutlined } from '@ant-design/icons-vue'
import { UploadVideo } from '@/components/basic/Upload'
import { message } from 'ant-design-vue'
import Api from '@/api/'
import to from '@/utils/awaitTo'

// 声明类型
const props = defineProps({
  row: {
    type: Object,
    default: () => {
    }
  }
})

// 声明事件
const emits = defineEmits(['callback'])

// 响应式数据
const state = reactive({
  open: false,
  title: '上传视频',
  loading: false,
  form: {
    videoUrl: '',
    topicTitle: '',
    videoId: ''
  }
})

const { open, loading, title, form } = toRefs(state)

// 弹窗
const handleOpen = () => {
  title.value = '上传视频'
  form.value.topicTitle = props.row.topicTitle //标题
  form.value.videoId = props.row.videoId //视频ID
  open.value = true
}

// 提交
const handleUploadSubmit = async () => {
  if (!form.value.videoUrl) {
    return message.error('视频为空')
  }
  const [error, data] = await to(Api.video.videoDownLoadVideo(form.value))
  if (!error) {
    console.log(data)
    open.value = false
    message.success('视频上传成功')
    emits('callback')
  }
}
</script>

<template>
  <div>
    <a-button :icon="h(CloudDownloadOutlined)" type="primary" @click="handleOpen">上传视频</a-button>
    <a-modal v-model:open="open" :cancel-button-props="{ loading: loading }" :maskClosable="true"
             :ok-button-props="{ disabled: loading }"
             :onOk="handleUploadSubmit" :title="title">
      <UploadVideo v-model="form.videoUrl" />
    </a-modal>
  </div>
</template>

<style lang="less" scoped>

</style>
